.container { width: 650px; margin: auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; border-radius: 20px; } form { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; text-align: left; margin-left: 20px; } input { width: 600px; margin-bottom: 15px; } button { background-color: #007BFF; color: #fff; padding: 10px; border: none; cursor: pointer; border-radius: 20px; } button:hover { background-color: #0056b3; } #linksContainer { display: flex; flex-direction: column; } #pv-txt { text-align: center; font-size: 24px; text-decoration: underline; } .link-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 20px; } .delete-button { background-color: #dc3545; color: #fff; padding: 5px 10px; border: none; cursor: pointer; margin-right: 20px; } .delete-button:hover { background-color: #bd2130; }
document.addEventListener('DOMContentLoaded', loadLinks); function addLink() { const titleInput = document.getElementById('linkTitle'); const urlInput = document.getElementById('linkURL'); const title = titleInput.value.trim(); const url = urlInput.value.trim(); if (title && url) { const link = { title, url }; saveLink(link); loadLinks(); titleInput.value = ''; urlInput.value = ''; } } function saveLink(link) { let links = JSON.parse(localStorage.getItem('customLinks')) || []; links.push(link); localStorage.setItem('customLinks', JSON.stringify(links)); } function loadLinks() { const linksContainer = document.getElementById('linksContainer'); linksContainer.innerHTML = ''; const links = JSON.parse(localStorage.getItem('customLinks')) || []; links.forEach((link, index) => { const linkElement = document.createElement('div'); linkElement.className = 'link-item'; const anchorElement = document.createElement('a'); anchorElement.href = link.url; anchorElement.textContent = link.title; anchorElement.target = '_blank'; linkElement.appendChild(anchorElement); // Add a delete button const deleteButton = document.createElement('button'); deleteButton.className = 'delete-button'; deleteButton.textContent = 'Delete'; deleteButton.setAttribute('data-index', index); deleteButton.addEventListener('click', deleteLink); linkElement.appendChild(deleteButton); linksContainer.appendChild(linkElement); }); } function deleteLink(event) { const index = event.target.getAttribute('data-index'); let links = JSON.parse(localStorage.getItem('customLinks')) || []; if (index !== null && index < links.length) { links.splice(index, 1); localStorage.setItem('customLinks', JSON.stringify(links)); loadLinks(); // Reload the links after deletion } }